<template>
  <n-space justify="center">
    <n-space @click="isMicOn = !isMicOn" class="nspace">
      <n-icon-wrapper v-if="isMicOn" :size="40" :border-radius="40" color="#3c4043">
        <n-icon :size="20">
          <svg-icon name="micon"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
      <n-icon-wrapper v-else :size="40" :border-radius="40" color="#ed5a65">
        <n-icon :size="20">
          <svg-icon name="micoff"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
    </n-space>

    <n-space @click="isCameraOn = !isCameraOn" class="nspace">
      <n-icon-wrapper v-if="isCameraOn" :size="40" :border-radius="40" color="#3c4043">
        <n-icon :size="20">
          <svg-icon name="videoon"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
      <n-icon-wrapper v-else :size="40" :border-radius="40" color="#ed5a65">
        <n-icon :size="20">
          <svg-icon name="videooff"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
    </n-space>

    <n-space @click="share" class="nspace">
      <n-icon-wrapper v-if="isShareOn" :size="40" :border-radius="40" color="#3c4043">
        <n-icon :size="20">
          <svg-icon name="shareon"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
      <n-icon-wrapper v-else :size="40" :border-radius="40" color="#ed5a65">
        <n-icon :size="20">
          <svg-icon name="shareoff"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
    </n-space>

    <n-space class="nspace" @click="quit">
      <n-icon-wrapper :size="40" :border-radius="10" color="#ed5a65">
        <n-icon :size="30">
          <svg-icon name="quit"></svg-icon>
        </n-icon>
      </n-icon-wrapper>
    </n-space>

  </n-space>
</template>

<script setup>
import { toogleMic, toggleCamera, toggleScreen } from '@/plugins/webRTC'
import { watch, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();
const isMicOn = ref(false);
const isCameraOn = ref(true);
const isShareOn = ref(false);

// 监听麦克风开启和关闭按钮，并将数据传递给rtc
watch(() => isMicOn.value, (newVal) => {
  toogleMic(newVal)
})

// 监听摄像头开启和关闭按钮，并将数据传递给rtc
watch(() => isCameraOn.value, newVal => {
  toggleCamera(newVal)
})

async function share() {
  if (!isShareOn.value) {
    let stream = null;
    let constraints = {
      video: true,
      audio: false
    }
    try {
      stream = await navigator.mediaDevices.getDisplayMedia(constraints)
    } catch (error) {
      console.log("获取共享屏幕流媒体失败", error);
    }

    if (stream) {
      isShareOn.value = !isShareOn.value
      store.commit('meeting/SET_SHARESTREAM', stream)
      toggleScreen(isShareOn.value, stream)
    }
  } else {
    // 停止共享屏幕
    store.state.meeting.shareStream.getTracks().forEach(track => {
      track.stop()
    });

    // 清空vuex中的数据
    store.commit('meeting/SET_SHARESTREAM', null)

    isShareOn.value = !isShareOn.value

    toggleScreen(isShareOn.value)
  }
}

function quit() {
  // console.log(store.state.meeting.participants);
  // console.log(store.state.meeting.streamSource);
  // 重定向，触发disconnect事件
  window.location.href = window.location.origin + '/meeting/identity-choice'
}
</script>
<style lang="scss" scoped>
.nspace {
  &:hover {
    cursor: pointer;
  }
}
</style>